<template>
  <div style="width: 100%;height: 100%">
    <el-container style="height: 100%;width: 100%; border: 1px solid #eee">
      <el-aside width="300px" style="background-color: #001528">
        <side-menu></side-menu>
      </el-aside>
      <el-container>
        <el-header style="height:80px; background-color: #fff;  display: flex; align-items: center;">
          <el-breadcrumb style="font-size: 25px;">
            <el-breadcrumb-item v-for="(item,index) in breadcrumbList" :key="index" :to="{ path: item.path }">{{item.name}}</el-breadcrumb-item>
          </el-breadcrumb>
        </el-header>
        <el-main style=" margin: 15px;padding:0;overflow: hidden;">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import sideMenu from "./sideMenu"
export default {
  data () {
    return {
      breadcrumbList: []
    }
  },
  components: {
    sideMenu
  },
  watch: {
    $route: {
      handler (val, oldVal) {
        if (val === oldVal) {
        } else {
          let arr = [];
          val.matched.forEach(item => {
            let obj = {
              name: "",
              path: ""
            };
            obj.name = item.name;
            obj.path = item.path || "/";
            arr.push(obj);
          });
          this.breadcrumbList = arr;
        }
      },
      immediate: true
    }
  }
}
</script>
